<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <div th:replace="common/common::html"></div>
    <meta charset="UTF-8">
    <title th:text="#{user.info}">Title</title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-32-60; /* -32 顶部主菜单高度，   -90 查询条件高度*/
        }

        $(function () {
            resizePageSize();
            var _columnWidth = _gridWidth/5;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{getUserInfolistByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'userUuid',name : 'userUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{user.name}]]*/"",name : 'userName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.nick}]]*/"",name : 'niceName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.mobile}]]*/"",name : 'mobile',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.email}]]*/"",name : 'email',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{common.operation}]]*/"",name : 'userUuid',width : _columnWidth, sortable : true,align : 'center',process: function (v, _trid, _row) {
                            var htmlContent = '<a href="#" onclick="deleteUser(\''+ v + '\')"><i class="glyphicon glyphicon-minus" style="color: #2f332a"></i></a>';
                            return htmlContent
                        }}
                    ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true
            });

            //查询用户管理模块的用户信息
            function queryBtn() {
                var searchUserName = $("#search-user-name-id").val();
                var searchUserNick=$("#search-user-nick-id").val();
                $("#flexigrid-id").flexOptions({
                    extParam:[
                        {name:"searchUserName",value:searchUserName},
                        {name:"searchUserNick",value:searchUserNick}
                    ]
                }).flexReload();
            }
            //查询用户输入框
            queryBtn();
            $("#query-btn-id").click(function (event) {
                event.stopPropagation();
                queryBtn();
            })


            $("#add-btn-id").click(function (event) {
                event.stopPropagation();
                $("#add-user-dialog-id").dialog('open')
            })
            //添加用户----------------------------------------------
            $("#add-user-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.add.tip.titile}]]*/'',
                buttons:[
                    {
                        text:/*[[#{common.confirm}]]*/'',
                        click:function(){

                            $("#add-user-form-id").submit()
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                ]
            });
            $("#add-user-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    $("#add-user-dialog-id").dialog('close')
                    queryBtn();
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                },
                complete : function(response, status) {
                }

            })
            //确认删除对话框
            $("#confirm-user-del-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.delete.tip.titile}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var userUuid = $("#confirm-user-del-id").attr("userUuid");
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType: 'json',
                                url: /*[[@{deleteUserById}]]*/'',
                                data: [{name: "userUuid", value: userUuid}],
                                success: function (data) {
                                    message(data.msg);
                                    $("#confirm-user-del-id").dialog( "close" );
                                    queryBtn();
                                },
                                error: function (msg) {
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });

                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                ]
            });

            //角色提交
            $("#allocate-btn-id").click(function (event) {
                event.stopPropagation()
                // $("#allocate-dialog-id").dialog('open')//弹出对话框
                allocateZtree();//这个方法中调用了 $("#allocate-dialog-id").dialog('open')

            });

            //角色提交对话框
            $("#allocate-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.role.allocate}]]*/'',//对话框标题
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',//确认按钮
                        click: function() {
                            var userUuid = $("#allocate-dialog-id").attr("userUUid");
                            var roleUuids = [];
                            var ztreeObj = $.fn.zTree.getZTreeObj("allocate-user-ztree");
                            var nodes = ztreeObj.getCheckedNodes(true);
                            $(nodes).each(function (index,item) {
                                roleUuids.push(item.id);
                            });

                            $.ajax({
                                    type: 'post',
                                    async: false,
                                    dataType : 'json',
                                    url: /*[[@{saveRoleByUserId}]]*/'',
                                    data: [
                                        {name:"userUuid",value:userUuid},
                                        {name:"roleUuids",value:roleUuids}
                                    ],
                                    success: function (data) {
                                        message(data.msg);
                                        $("#allocate-dialog-id").dialog('close');
                                    },
                                    error: function(msg){
                                        message(/*[[#{common.error}]]*/'');
                                    }
                                }
                            );
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',//关闭按钮
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                ]
            });

            //岗位分配
            $("#gangwei-allocate-btn-id").click(function(event){
                event.stopPropagation();
                //$("#gangwei-allocate-dialog-id").dialog('open')
                gangwei_allocateZtree();
            })

            $("#gangwei-allocate-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.gangwei.allocate}]]*/'',//对话框标题
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',//确认按钮
                        click: function() {
                            var userUuid = $("#gangwei-allocate-dialog-id").attr("userUUid");
                            var gangweiUuids = [];
                            var ztreeObj = $.fn.zTree.getZTreeObj("gangwei-allocate-user-ztree");
                            var nodes = ztreeObj.getCheckedNodes(true);
                            $(nodes).each(function (index,item) {
                                gangweiUuids.push(item.id);
                            });

                            $.ajax({
                                    type: 'post',
                                    async: false,
                                    dataType : 'json',
                                    url: /*[[@{savegangweiByUserId}]]*/'',
                                    data: [
                                        {name:"userUuid",value:userUuid},
                                        {name:"gangweiUuids",value:gangweiUuids}
                                    ],
                                    success: function (data) {
                                        message(data.msg);
                                        $("#gangwei-allocate-dialog-id").dialog('close');
                                    },
                                    error: function(msg){
                                        message(/*[[#{common.error}]]*/'');
                                    }
                                }
                            );
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',//关闭按钮
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                ]
            })


            //修改用户----------------------------------------------
            $("#update-userinfo-btn-id").click(function (event) {
                event.stopPropagation();
                $("#update-user-dialog-id").dialog('open')
            })

            $("#update-user-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.info.update}]]*/'',
                buttons:[
                    {
                        text:/*[[#{common.confirm}]]*/'',
                        click:function(){
                            var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0)//表格的id
                            if(ids.length !== 1){
                                message(/*[[#{common.select.one}]]*/'');
                                return;
                            }
                            $("#update-user-id").val(ids);
                            $("#update-user-form-id").submit()
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                ]
            });
            $("#update-user-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    $("#update-user-dialog-id").dialog('close')
                    queryBtn();
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                },
                complete : function(response, status) {
                }

            })
        });//ready



        //删除用户管理模块的用户信息
        function deleteUser(userUuid) {
            $("#confirm-user-del-id").attr("userUuid",userUuid);
            $("#confirm-user-del-id").dialog('open');
        }

        //多选框
        var allocateSetting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        function allocateZtree() {
            var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0)//表格的id
            if(ids.length !== 1){
                message(/*[[#{common.select.one}]]*/'');
                return;
            }

            $("#allocate-dialog-id").attr("userUUid",ids);//Ztree 的id

            $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{getRoleZtreeListByUserId}]]*/'',//需要实现这个方法
                    data: [{name:"userUuid",value:ids}],//方法中右userIuid
                    success: function (data) {//成功时
                        //allocateSetting ：上面定义的多选框  data ：从数据库获取的数据
                        $.fn.zTree.init($("#allocate-user-ztree"), allocateSetting, data);//初始化
                        $("#allocate-dialog-id").dialog('open');//打开自己定义的胡鄂塞提交对话框
                    },
                    error: function(msg){//出错时
                        message(/*[[#{common.error}]]*/'');
                    }
                }
            );
        }

        // //岗位分配树
        // function gangwei_allocateZtree() {
        //     var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0)//表格的id
        //     if(ids.length !== 1){
        //         message(/*[[#{common.select.one}]]*/'');
        //         return;
        //     }
        //
        //     $("#gangwei-allocate-dialog-id").attr("userUUid",ids);//Ztree 的id
        //
        //     $.ajax({
        //             type: 'post',
        //             async: false,
        //             dataType : 'json',
        //             url: /*[[@{getgangweiZtreeListByUserId}]]*/'',//需要实现这个方法
        //             data: [{name:"userUuid",value:ids}],//方法中右userIuid
        //             success: function (data) {//成功时
        //                 //allocateSetting ：上面定义的多选框  data ：从数据库获取的数据
        //                 $.fn.zTree.init($("#gangwei-allocate-user-ztree"), allocateSetting, data);//初始化
        //                 $("#gangwei-allocate-dialog-id").dialog('open');//打开自己定义的胡鄂塞提交对话框
        //             },
        //             error: function(msg){//出错时
        //                 message(/*[[#{common.error}]]*/'');
        //             }
        //         }
        //     );
        // }

    </script>
</head>
<body>

    <div>
<!--        用户名搜索框-->
        <span th:text="#{user.name}"></span>
        <input type="text" id="search-user-name-id" th:placeholder="#{user.name}">
<!--昵称搜索框-->
        <span th:text="#{user.nick}"></span>
        <input type="text" id="search-user-nick-id" th:placeholder="#{user.nick}">
<!--    查询button    -->
        <a href="#" id="query-btn-id" class="navbar-btn">
            <i class="glyphicon glyphicon-zoom-in"></i>
            <span th:text="#{common.query}"></span>
        </a>
<!--    用户信息修改    -->
        <a href="#" id="update-userinfo-btn-id" class="navbar-btn">
            <i class="glyphicon glyphicon-tower"></i>
            <span th:text="#{user.info.update}"></span>
        </a>
<!--    角色分配    -->
<!--        <a href="#" id="allocate-btn-id" class="navbar-btn">-->
<!--            <i class="glyphicon glyphicon-tower"></i>-->
<!--            <span th:text="#{user.role.allocate}"></span>-->
<!--        </a>-->
<!--&lt;!&ndash;        岗位分配&ndash;&gt;-->
<!--        <a href="#" id="gangwei-allocate-btn-id" class="navbar-btn">-->
<!--            <i class="glyphicon glyphicon-road"></i>-->
<!--            <span th:text="#{user.gangwei.allocate}"></span>-->
<!--        </a>-->
<!--        添加用户-->
        <a href="#" id="add-btn-id">
            <i class="glyphicon glyphicon-plus" style="color: #2f332a"></i>
            <span th:text="#{common.add}"></span>
        </a>
    </div>
<!--    信息表格-->
    <table id="flexigrid-id"></table>

<!--确认是否删除用户-->
    <div id="confirm-user-del-id" style="display: none">
        <span th:text="#{user.delete.tip.info}"></span>
    </div>

<!--&lt;!&ndash;  角色提交对话框  &ndash;&gt;-->
<!--    <div id="allocate-dialog-id" style="display: none">-->
<!--        <ul id="allocate-user-ztree" class="ztree"></ul>-->
<!--    </div>-->
<!--&lt;!&ndash;岗位分配对话框&ndash;&gt;-->
<!--    <div id="gangwei-allocate-dialog-id" style="display: none">-->
<!--        <ul id="gangwei-allocate-user-ztree" class="ztree"></ul>-->
<!--    </div>-->
<!--添加用户对话框-->
    <div id="add-user-dialog-id" style="display: none">
        <form id="add-user-form-id" th:action="@{addUserById}" method="post">
            <div class="form-group">
                <span th:text="#{user.nick}"></span>
                <input class="form-control" type="text" id="add-user-nick" name="niceName" th:placeholder="#{user.nick}">
            </div>
            <div class="form-group">
                <span th:text="#{user.name}"></span>
                <input class="form-control" type="text" id="add-user-name" name="userName" th:placeholder="#{user.name}">
            </div>
            <div class="form-group">
                <span type="password" th:text="#{user.password}"></span>
                <input class="form-control" type="text" id="add-user-password" name="password" th:placeholder="#{user.password}">
            </div>
            <div class="form-group">
                <span th:text="#{user.mobile}"></span>
                <input class="form-control" type="text" id="add-user-mobile" name="mobile" th:placeholder="#{user.mobile}">
            </div>
            <div class="form-group">
                <span th:text="#{user.email}"></span>
                <input class="form-control" type="text" id="add-user-email" name="email" th:placeholder="#{user.email}">
            </div>

        </form>

    </div>

<!--用户修改对话框-->
    <div id="update-user-dialog-id" style="display: none">
        <form id="update-user-form-id" th:action="@{updateUser}" method="post">
            <div class="form-group">
                <span th:text="#{user.nick}"></span>
                <input name="userUuid" id="update-user-id"  type="hidden">
                <input class="form-control" type="text" id="update-user-nick" name="niceName" th:placeholder="#{user.nick}">
            </div>
            <div class="form-group">
                <span th:text="#{user.name}"></span>
                <input class="form-control" type="text" id="update-user-name" name="userName" th:placeholder="#{user.name}">
            </div>
            <div class="form-group">
                <span type="password" th:text="#{user.password}"></span>
                <input class="form-control" type="text" id="update-user-password" name="password" th:placeholder="#{user.password}">
            </div>
            <div class="form-group">
                <span th:text="#{user.mobile}"></span>
                <input class="form-control" type="text" id="update-user-mobile" name="mobile" th:placeholder="#{user.mobile}">
            </div>
            <div class="form-group">
                <span th:text="#{user.email}"></span>
                <input class="form-control" type="text" id="update-user-email" name="email" th:placeholder="#{user.email}">
            </div>

        </form>
    </div>

</body>
</html>